<!-- @format -->

<template>
    <div>
        <h2>child</h2>
        <div>
            <span>{{ num }}</span
            ><button @click="add">+</button>
        </div>
        <label>word:</label><input type="text" v-model="word" />
        <div><button>修改</button></div>
    </div>
</template>

<script setup lang="ts">
const props = defineProps({
    num: {
        type: Number,
        default: 1,
        required: false,
    },
});

// 触发父组件的方法 宏函数，不需要引入
const emits = defineEmits(['add']);

// 双向绑定传值
const word = defineModel('word');

// 子组件调用父组件方法 以及 传值
const add = () => {
    console.log('add', props.num);
    emits('add', props.num + 1);
};

// 重置：暴露给父组件调用的方法
const reset = () => {
    word.value = '什么都没有。。。';
};

//使用了setup是私有的，必须要使用defineExpose暴露子组件的方法和【值】
defineExpose({reset});
</script>
